<template>
  <div class="searchFood">
    <div class="top">
      <span>搜索</span>
    </div>
    <div class="serchPosition">
      <input
        type="text"
        placeholder="输入商家或者美食名称"
        v-model="searchObj"
      />
      <button @click="btn">搜索</button>
      <ul v-if="showA" class="resUl">
        <p class="searchHis">搜索历史</p>
        <li v-for="(v, i) in historyObj" :key="i" >
          <p class="addressName" ref="searchHistory">
              <span class="searchName" v-text="v.name" @click="searchContent(v)"></span>
              <span class="del" @click="del(i)">删除</span>
          </p>
        </li>
        <div class="clearAll" v-if="showClear" @click="clearAll">清空所有</div>
      </ul>
      <ul v-if="showR && !showA" class="resUl">
        <li v-for="(v, i) in resultArr" :key="i" @click="searchContent(v)">
            <img class="logo" :src="'https://elm.cangdu.org/img/' + v.image_path" alt="">
          <p v-text="v.name" class="addressName"></p>
          <p class="address">
              <span v-text="v.float_minimum_order_amount+'起送 / '"></span>
              <span v-text="v.distance"></span>
          </p>
        </li>
      </ul>
    </div>
    <bottomNav></bottomNav>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BottomNav from "./BottomNav.vue";
let hisArr1=[];//定义一个数组存储历史搜索记录
let uniqueArr1=[];//去重后的数组
export default {
  name: "searchFood",
  data() {
    return {
      active: 1,
      searchObj: "",
      showA: true,
      showR: false,
      showClear: false,
      resultArr: {}, //搜索结果
      historyObj: [], //历史记录
    };
  },
  created() {
    this.$store.commit("getBottomActive", this.active);
    //console.log(this.bottomActive);
    //console.log(this.shop);
      //获取所有cookies
        this.historyObj=JSON.parse(this.$cookies.get("shopSearchHistory"));
        console.log(this.historyObj)
        // 如果有历史记录 显示清空所有按钮
        console.log(uniqueArr1)
        if(this.historyObj){
            this.showClear=true
        }else{
            this.showClear=false;
        }
  },
  methods: {
    btn() {
      let api =
        this.eleUrl.searchShop +
        "?geohash=" +
        this.shop.latitude +
        "," +
        this.shop.longitude +
        "&keyword=" +
        this.searchObj;
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
       // console.log(res.data);
        this.resultArr = res.data;
        this.showR = true;
        this.showA = false;
      });
      //清空输入框
      this.searchObj = "";
    },
    // 数组去重
    unique(arr) {
      uniqueArr1 = Array.from(new Set(arr));
      return uniqueArr1;
    },
    // 搜索记录
    searchContent(content) {
       // console.log(content)
      //把数据存入数组中去
      hisArr1.push(content);
      //数组去重
      this.unique(hisArr1);
      console.log(JSON.stringify(uniqueArr1))
      //json格式存储到cookie
      this.$cookies.set("shopSearchHistory",JSON.stringify(uniqueArr1));
      //点击跳转到订餐首页
      this.$store.commit("getShop",content)
      this.$router.push({
          name:'shop'
      });
    },
    // 删除一条记录
    del(index){
        console.log(index)
        uniqueArr1.splice(index,1);
        console.log(uniqueArr1)
        this.historyObj=uniqueArr1
    },
    // 清空历史记录
    clearAll() {
       this.$cookies.remove("shopSearchHistory");
            uniqueArr1="";
            this.historyObj=uniqueArr1
    },
  },
  computed: {
    ...mapState(["bottomActive", "eleUrl", "shop"]),
  },
  components: { BottomNav },
};
</script>

<style scoped>
.searchFood {
  font-size: 0.15rem;
}
.top {
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.2rem;
  color: white;
  height: 0.4rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
.serchPosition {
  border-bottom: 2px solid #ddd;
  border-top: 2px solid #ddd;
  background-color: #fff;
  width: 3.75rem;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.serchPosition > input {
  height: 0.28rem;
  width: 80%;
  border-radius: 5px;
  outline: none;
  border: 1px solid gray;
  display: block;
  margin: 0.1rem auto;
  padding-left: 0.1rem;
}
.serchPosition > button {
  display: block;
  margin: 0.1rem auto;
  height: 0.3rem;
  width: 85%;
  color: white;
  border: none;
  border-radius: 5px;
  background-color: rgb(80, 143, 238);
}
/* 搜索结果 */
.resUl > li {
  padding: 0.1rem;
  border-top: 1px solid rgb(190, 187, 187);
}
.logo{
    width: 10%;
    float: left;
    margin-right: .1rem;
}
.addressName {
  font-size: 0.18rem;
}
.address {
  font-size: 0.14rem;
  color: gray;
  margin-top: 0.1rem;
}
/* 搜索历史 */
.searchHis {
  padding: 0.1rem;
  font-size: 0.14rem;
}
.del{
    font-size: .1rem;
    line-height: .25rem;
    float: right;
}
/* 清空所有 */
.clearAll {
  text-align: center;
  font-size: 0.2rem;
  height: 0.5rem;
  line-height: 0.5rem;
  color: gray;
  border-top: 0.01rem solid #ddd;
}
</style>